<template>
   <div id="box">
     <el-row justify="center">
       <el-col :span="2" :offset="20" style="color: #342cff">
         你好，{{user_session.userName}}
       </el-col>
       <el-col :span="2" >
         <el-button type="danger" size="small" @click="exit">
           退出
         </el-button>
       </el-col>
     </el-row>
     <el-row justify="center">
       <el-col :span="2">
         <el-upload
             class="upload-demo top_button"
             action=""
             name="file"
             :show-file-list="false">
           <el-button type="primary">文件上传</el-button>

         </el-upload>
       </el-col>
       <el-col :span="7">
         <el-button type="success" class="top_button"> 新建文件夹</el-button>
         <el-button type="warning" class="top_button"> 刷新</el-button>
         <el-button type="danger" class="top_button"> 一键播放音乐</el-button>
         </el-col>
       <el-col :span="10" style="padding-top: 10px;" align="right">
         <el-input placeholder="搜索当前目录" style="width: 400px" v-model="title">
           <template #prepend>
             <el-select placeholder="分类搜索" style="width: 115px;">
               <el-option>mp4</el-option>
               <el-option>mp3</el-option>
               </el-select>
           </template>
           <template #append>
             <el-button :icon="Search">搜索</el-button>
           </template>
           </el-input>
         </el-col>
     </el-row>


   </div>
  <!--     目录导航-->
  <el-row justify="center" style="margin-top: 10px;margin-bottom: 10px">
    <el-col :span="20">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/'}">根目录</el-breadcrumb-item>
        <el-breadcrumb-item>其他目录</el-breadcrumb-item>
        <el-breadcrumb-item>其他目录</el-breadcrumb-item>
        <el-breadcrumb-item>其他目录</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

<!--  列表-->
  <el-row justify="center">
    <el-col :span="19">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="文件名称" width="180" />
        <el-table-column prop="type" label="文件类型" width="80" />
        <el-table-column prop="size" label="文件大小" width="80"/>
        <el-table-column prop="time" label="创建时间" width="180" />
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button type="success">播放</el-button>
            <el-button type="primary">分享</el-button>
            <el-button type="success">移动</el-button>
            <el-button type="info">下载</el-button>
            <el-button type="warning">重命名</el-button>
            <el-button type="danger">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="Main">
import {onMounted, reactive, ref} from "vue";
import { ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import router from "@/router";
import {post} from "@/assets/request.ts"


//定义变量，用于获取用户输入的搜索内容
let title=ref('');

//定义变量，用于保存列表数据
let tableData=ref([])

//用户的路径  / :根目录
let nowUserPath=ref('/');

//声明一个对象，英语保存  登录的用户信息
let user_session=reactive({userName:''})
//获取session中的key为user的数据

//打印user_session
console.log(user_session)

//定义onMounted生命周期函数
onMounted(()=>{
  // 因为使用过了 ref 定义变量，所以需要.value才能使用   template中不需要
  nowUserPath.value='/';
  //获取session中的key为user的数据
  let userJsonstr = sessionStorage.getItem("user")
  //将字符串转换为对象
//console.log(userJsonstr,JSON.parse(userJsonstr));
//通过Object.assion  将转换后的对象替换到user_session对象中
  Object.assign(user_session,JSON.parse(userJsonstr))

  //当页面加载完成后，调用userFileList查询用户列表
  userFileList()
})

//通过该方法查询用户文件列表
const userFileList=()=>{
  post('/api/userfilelist',{path:nowUserPath.value})
.then(response=>{
    // 请求成功
    tableData.value=response;
  }).catch(error =>{
    // 请求失败
    console.log("请求失败：",error)
  })
}

//退出登录
const exit=()=>{
  ElMessageBox.confirm('确定退出?')
      .then(() => {
        //点击确定后
        //清除session中的内容
        //sessionStorage.removeItem('user')
        //清除session中的所有内容
        sessionStorage.clear()
        //清除session后跳转到登录页面
        router.push({path:'/login'})
      })
      .catch(() => {
        // catch error
      })
}
</script>

<style scoped lang="css">
#box{
  background-image:url("../assets/header_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}
.top_button{
  margin-left: 20px;
  margin-top:10px;
}

</style>